/**
 * 基础菜单 我的用户管理  自定义页面
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">档案管理</el-breadcrumb-item>
      <el-breadcrumb-item>所有学员考试情况</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="考试名:">
        <el-input
          size="small"
          v-model="formInline.UserExam.examName"
          placeholder="输入考试名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="学员名:">
        <el-input
          size="small"
          v-model="formInline.UserExam.userName"
          placeholder="输入学员名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="评阅:">
        <el-select v-model="formInline.UserExam.isRead"  placeholder="请选择是否评阅">
           <el-option selected="selected"  value="--请选择--"/>
           <el-option  value="已评阅"/>
           <el-option  value="未评阅"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
      </el-form-item>
       <el-form-item>
        <el-button
          size="small"
          type="warning"
          icon="el-icon-back"
          @click="back"
          >返回</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="user.name" label="学员名称" width="80">
      </el-table-column>
      <el-table-column sortable prop="information.examName" label="考试名称" width="100">
      </el-table-column>
      <el-table-column sortable prop="cord" label="得分" width="100">
      </el-table-column>
      <el-table-column sortable prop="information.beginTime" label="开始时间" width="100">
      </el-table-column>
      <el-table-column sortable prop="information.endTime" label="结束时间" width="100">
      </el-table-column>
      <el-table-column sortable prop="information.allTime" label="总时间" width="100">
      </el-table-column>
      <el-table-column sortable prop="information.status" label="状态" width="80">
      </el-table-column>
      <el-table-column sortable prop="isFinish" label="是否完成考试" width="80">
      </el-table-column>
      <el-table-column sortable prop="isRead" label="是否评阅" width="80">
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button type="success" v-if="scope.row.isRead === '已评阅'" size="mini" @click="checkExam(scope.$index, scope.row)"
            ><i class="el-icon-view"></i>查看</el-button>
          <el-button
            v-if="scope.row.isFinish === '以完成'&&scope.row.isRead === '未评阅'"
            size="mini"
            type="danger"
            @click="finish(scope.$index, scope.row)"
            ><i class="el-icon-edit"></i>评阅</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页子组件   复用  -->
    <Pagination :child-msg="pageparm" @call="callFather"></Pagination>
    <!-- 编辑和新增界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="30%"
      @click="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="用户名称" prop="name">
          <el-input
            size="small"
            v-model="editForm.account"
            auto-complete="off"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            size="small"
            v-model="editForm.password"
            auto-complete="off"
            placeholder="请输入用户密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户状态" prop="status">
          <el-input
            size="small"
            v-model="editForm.status"
            auto-complete="off"
            placeholder="请输入用户状态"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择角色">
          <el-select v-model="editForm.roleId" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import axios from "axios";
export default {
  //new Vue
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      editForm: {
        id:"",
        account: "",
        password:"",
        status: "",
        roleId:""
        // token: localStorage.getItem("logintoken"),
      },
      // rules表单验证
      rules: {
        // deptName: [
        //   { required: true, message: "请输入部门名称", trigger: "blur" },
        // ],
        // deptNo: [
        //   { required: true, message: "请输入部门代码", trigger: "blur" },
        // ],
      },
      //子传父的数据存放位置 搜索用rabcManager
      formInline: {
        startPage: 1,
        limit: 5,
        UserExam: {
          examName: "",
          userName:"",
          isRead:""

        }
        // token: localStorage.getItem("logintoken"),
      },
      // 删除部门
      seletedata: {
        ids: "",
        token: localStorage.getItem("logintoken"),
      },
      userparm: [], //搜索用户
      listData: [], //后端查出的列表用户数据
      // 分页参数   父传给子的参数存放位置
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 10,
      },
      //角色下拉框 需要的model数据
      options: [],
        //value就是存值的地方
      value: ''
    };
  },
  // 注册组件  分页
  components: {
    Pagination,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕  浏览器 加载我们的页面 自动触发的方法
   */
  created() {
    //学习 axios
    //页面初始化方法获取初始列表数据的地方
    this.formInline.UserExam = JSON.parse(localStorage.userExam);
    console.log( this.formInline.UserExam);
    this.getData();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取用户考试列表 把他替换成axios后台请求
    getData() {
      console.log(this.formInline.UserExam.id);
      axios
        .get("http://localhost:8081/studentExam/getStudentExamList", {
          params: {
            examId:this.formInline.UserExam.id,
            startPage: this.pageparm.currentPage,
            pageSize: this.pageparm.pageSize,
          },
        })
        .then((res) => {
          console.log(res);

          this.listData = res.data.list;
          this.pageparm.total = res.data.total;

          this.listData.forEach(s=>{
            if(s.isFinish==2){
              s.isFinish='未完成';
            }else if(s.isFinish==1){
               s.isFinish='已完成';
            };
            if(s.isRead==2){
              s.isRead='未评阅';
            }else if(s.isRead==1){
               s.isRead='已评阅';
            };
            if(s.information.status==1){
              s.information.status = '未开始';
            }else if(s.information.status==2){
              s.information.status = '正在进行';
            }else if(s.information.status==3){
              s.information.status = '已结束';
            }
          })
        })
        .catch((res) => {});
    },

    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.pageparm.currentPage = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.search();
    },
    // 搜索事件
    search() {
      this.pageparm.startPage=1;
       axios
        .get("http://localhost:8081/studentExam/searchStudentExamList",{
          params: {
              examId:this.formInline.UserExam.id,
              examname:this.formInline.UserExam.examName,
              username:this.formInline.UserExam.userName,
              isRead:this.formInline.UserExam.isRead,
              startPage: this.pageparm.currentPage,
              pageSize: this.pageparm.pageSize,
            },
        })
        .then((res) => {
          console.log(res.data);
          this.listData = res.data.list;
          this.pageparm.total = res.data.total;
          this.listData.forEach(s=>{
            if(s.isFinish==2){
              s.isFinish='未完成';
            }else if(s.isFinish==1){
               s.isFinish='已完成';
            };
            if(s.isRead==2){
              s.isRead='未评阅';
            }else if(s.isRead==1){
               s.isRead='已评阅';
            };
            if(s.information.status==1){
              s.information.status = '未开始';
            }else if(s.information.status==2){
              s.information.status = '正在进行';
            }else if(s.information.status==3){
              s.information.status = '已结束';
            }
          })
        })
        .catch((res) => {});
      // this.getdata(this.formInline);
    },
    back(){
       this.$router.push({ path: '/exam/test/examlist' });
    },
    //查看试卷
    checkExam: function (index, row) {
      console.log(row);
      localStorage.userExam = JSON.stringify(row);
      this.$router.push({ path: '/exam/test/checkuserexam' });
    },
    // 开始考试
    finish(index, row) {
      this.$confirm("是否开始考试？", "考试", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(index, "-------------", row);
          //跳转路由
          this.$router.push({ path: '/user/finishexam' });
          this.$message({
            type: "success",
            message: "开始考试!",
          });
          //这个是restful风格
         /* axios
            .post("/rbacManager/deleteManager/" + row.id, {
              //传的对象
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "用户已删除!",
              });
              this.search();
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("用户删除失败，请稍后再试！");
            }); */
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userManager {
  width: 100%;
}
</style>
